<div class="layui-fluid" lay-title="权限明细">
  <div class="layui-fluid">
    <div class="layui-row layui-col-space10">
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <i class="layui-icon layui-icon-Batchfolding"></i>&nbsp;Handler
            提取权限明细
          </div>
          <div class="layui-card-body">
            <table
              id="handler_permissions_detail_list_table"
              lay-filter="handler_permissions_detail_list_table"
            ></table>
          </div>
        </div>
      </div>
      <div class="layui-col-md6">
        <div class="layui-card">
          <div class="layui-card-header">
            <i class="layui-icon layui-icon-Batchfolding"></i
            >&nbsp;系统已有权限明细
          </div>
          <div class="layui-card-body">
            <table
              id="permissions_detail_list_table"
              lay-filter="permissions_detail_list_table"
            ></table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 工具栏 -->
  <script type="text/html" id="permissions_detail_list_table_toolbar">
    <div style="display:flex;">
      <div style="font-size:25px;">
          <i class="layui-icon layui-icon-search" ></i>
      </div>
      <div class="layui-input-inline" style="margin-left:20px;width:200px;height:20px">
        <input
          type="text"
          placeholder="权限名"
          class="layui-input"
          id="perm_name_filter"
        />
      </div>
      <button class="layui-btn" style="margin-left:20px;" onclick="reloadPermissionsTable()">
        <i class="layui-icon layui-icon-search"></i> 搜索
      </button>
      <button class="layui-btn" style="margin-left:20px;" onclick="flushAllPermission()">
        <i class="layui-icon layui-icon-sync"></i> 刷新所有权限
      </button>
    </div>
  </script>

  <script>
    layui.use(["admin", "table"], function (admin, table) {
      var $ = layui.$;
      var table = layui.table;
      var handlerPermissions;

      flushAllPermission = function () {
        admin.get({
          api: "flushAllPermission",
          success: function (res) {
            layer.alert(res.data);
          },
        });
      };

      reloadPermissionsTable = function (obj) {
        var permNameFilterValue = $("#perm_name_filter").val() || null;

        var queryData = {
          permName: permNameFilterValue,
        };

        var queryTemp = {};
        Object.keys(queryData).forEach(function (val, index) {
          if (queryData[val] != null) queryTemp[val] = queryData[val];
        });
        console.log(queryTemp);

        permissions_tableIns.reload({
          url: "ucenter/sys-permission",
          where: queryTemp,
        });

        // 设置刷新后表格的查询条件
        $("#perm_name_filter").val(permNameFilterValue);
      };

      addOrUpdate = function (index) {
        layer.close(index);
        curSel = handlerPermissions[index - 1];
        layer.confirm(
          "添加&更新权限：<br>" + curSel.pval + "(" + curSel.pname + ")吗？",
          { icon: 3, title: "添加&更新权限" },
          function (index) {
            admin.post({
              api: "getSysPermission",
              data: curSel,
              success: function (res) {
                layer.alert(
                  "新增&更新权限 " +
                    curSel.pval +
                    "(" +
                    curSel.pname +
                    ") 成功！",
                  function (index) {
                    layer.close(index);
                    //layui.view.tab.refresh();
                  }
                );
              },
            });
          }
        );
      };

      // 渲染表格实例
      var permissions_tableIns = table.render({
        elem: "#permissions_detail_list_table",
        toolbar: "#permissions_detail_list_table_toolbar",
        url: "ucenter/sys-permission", //数据接口
        cols: [
          [
            {
              field: "pid",
              title: "ID",
              width: 60,
              unresize: "true",
              align: "center",
            },
            {
              field: "pname",
              title: "权限名称",
              mWidth: 250,
              align: "center",
            },
            {
              field: "pval",
              title: "权限值",
              mWidth: 250,
              align: "center",
            },
            {
              field: "ptype",
              title: "权限类型",
              width: 80,
              align: "center",
            },
            {
              field: "pparent",
              title: "父级权限",
              width: 80,
              align: "center",
            },
            {
              field: "pcreateTime",
              title: "创建时间",
              width: 160,
              align: "center",
            },
          ],
        ],
      });

      // 渲染Handler权限表格
      var handler_permissions_tableIns = table.render({
        elem: "#handler_permissions_detail_list_table",
        page: false,
        request: null,
        done: function (res) {
          handlerPermissions = res.data;
        },
        parseData: function (res) {
          return {
            code: res.code,
            msg: res.msg,
            data: res.data,
          };
        },
        url: "ucenter/sys-permission/sys_permission", //数据接口
        cols: [
          [
            {
              field: "index",
              title: "No.",
              width: 60,
              unresize: "true",
              align: "center",
            },
            {
              field: "pname",
              title: "权限名称",
              minWidth: 180,
              align: "center",
            },
            {
              field: "pval",
              title: "权限值",
              minWidth: 150,
              align: "center",
            },
            {
              field: "handlerName",
              title: "handler名称",
              minWidth: 120,
              align: "center",
            },
            {
              title: "操作",
              width: 100,
              align: "center",
              templet: function (d) {
                return (
                  "<button class='layui-btn layui-btn-xs' onclick='addOrUpdate(" +
                  d.index +
                  ")'>添加&更新</button>"
                );
              },
            },
          ],
        ],
      });
    });
  </script>
</div>
